<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import {
    ElForm,
    ElFormItem,
    ElInput,
    ElInputNumber,
    ElColorPicker,
    ElTimePicker,
    ElButton,
    ElSelect,
    ElOption,
    ElCheckbox,
    ElSlider,
  } from 'element-plus';

  import { saveEntityTelemetry } from '/@/api/thingsborad/entity/entity';
  import { saveTelemetryParams } from '/@/api/thingsborad/entity/model/entityModel';
  const selectedTime = ref(true);
  // 定义表单数据
  const form = ref({
    name: '新建场景',
    backgroundColor: 'rgba(30, 36, 48, 1)',
    // longitude: 116.405285,
    // latitude: 39.904989,
    // altitude: 0,
    grid: {
      show: true,
      opacity: 1,
      color: 'rgb(30, 36, 48)',
      lineColor: 'rgb(30, 36, 48)',
      // mirror: false,
      // blur: 20,
    },
    environment: {
      type: 'default',
      skyboxUrl: '',
      // skyboxHorizontalAngle: 0,
      // environmentMapUrl: '',
      // brightness: 1,
      // horizontalAngle: 0,
      // weather: 'none',
      // time: '09:00',
      // sunlightEnabled: true,
      // sunlightBrightness: 2,
      // sunlightHorizontalAngle: 0,
      // shadowsEnabled: true,
      // shadowQuality: 'medium',
      // shadowBias: 0.5,
    },
    camera: {
      type: 'orbit',
      disabledDuringRuntime: false,
      fieldOfView: 45.8,
      centerX: 0,
      centerY: 0,
      centerZ: 0,
      // radius: 48.5032651,
      // minRadius: 1,
      // maxRadius: 10000,
      // horizontalAngle: -90,
      // verticalAngle: 45,
      // minVerticalAngle: 0,
      // maxVerticalAngle: 180,
    },
    // effects: {
    //   fogEnabled: false,
    //   fogColor: 'rgb(30, 36, 48)',
    //   fogStartDistance: 0,
    //   fogEndDistance: 1000,
    //   particleSystemEnabled: false,
    //   particleCount: 100,
    //   particleSpeed: 1,
    //   particleColor: 'rgb(30, 36, 48)',
    //   glowEnabled: false,
    //   glowIntensity: 1,
    //   glowColor: 'rgb(30, 36, 48)',
    //   reflectionEnabled: false,
    //   reflectionIntensity: 1,
    //   reflectionBlur: 1,
    // },
    methods: {
      // 处理时间选择器的变化
      handleTimeChange(event) {
        form.value.environment.time = event.target.value;
        console.log('Selected time:', form.value.environment.time);
      },
    },
  });
  // const telemetryForm = ref<InstanceType<typeof ElForm> | null>(null);
  const message = ref('');

  // const uploadTelemetry = async () => {
  //   try {
  //     const params: saveTelemetryParams[] = [
  //       {
  //         entityType: 'DEVICE',
  //         entityId: '4113e130-ffda-11ef-9a2b-831759278053', // 设备ID
  //         key: 'longitude',
  //         value: form.value.longitude,
  //       },
  //       {
  //         entityType: 'DEVICE',
  //         entityId: '4113e130-ffda-11ef-9a2b-831759278053', // 设备ID
  //         key: 'latitude',
  //         value: form.value.latitude,
  //       },
  //       {
  //         entityType: 'DEVICE',
  //         entityId: '4113e130-ffda-11ef-9a2b-831759278053', // 设备ID
  //         key: 'altitude',
  //         value: form.value.altitude,
  //       },
  //     ];
  //     for (const param of params) {
  //       await saveEntityTelemetry(param);
  //     }
  //     message.value = '遥测数据上传成功！';
  //   } catch (error) {
  //     message.value = '遥测数据上传失败，请重试。';
  //     console.error(error);
  //   }
  //   console.log(message.value);
  // };
  // 在 mounted 时监听事件总线的事件
  // onMounted(() => {
  //   ReceiveMessage.addListener(EventTypeEnum.uploadTelemetry, uploadTelemetry);
  // });
</script>

<template>
  <div class="settings-panel">
    <el-form :model="form" label-width="6.5vw">
      <!-- 基础设置 -->
      <el-form-item label="基础" class="right-menu-title" />
      <el-form-item label="名称" style="color: #fff">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="背景色">
        <el-color-picker v-model="form.backgroundColor" />
      </el-form-item>
      <!--      <el-form-item label="经度">-->
      <!--        <el-input-number-->
      <!--          v-model="form.longitude"-->
      <!--          controls-position="right"-->
      <!--          class="form-slider form-number"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="纬度">-->
      <!--        <el-input-number-->
      <!--          v-model="form.latitude"-->
      <!--          controls-position="right"-->
      <!--          class="form-slider form-number"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="海拔">-->
      <!--        <el-input-number-->
      <!--          v-model="form.altitude"-->
      <!--          controls-position="right"-->
      <!--          class="form-slider form-number"-->
      <!--        />-->
      <!--        <el-form-item>-->
      <!--          <el-button @click="uploadTelemetry" style="position: fixed">上传数据</el-button>-->
      <!--        </el-form-item>-->
      <!--      </el-form-item>-->
      <!-- 网格地面设置 -->
      <el-form-item label="网格地面" class="right-menu-title" />
      <el-form-item label="显示">
        <el-checkbox v-model="form.grid.show" />
      </el-form-item>
      <el-form-item label="透明度">
        <el-slider
          v-model="form.grid.opacity"
          :min="0"
          :max="1"
          step="0.01"
          show-input
          label="Opacity"
          class="form-slider clean-border"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="网格颜色">
        <el-color-picker v-model="form.grid.color" />
      </el-form-item>
      <el-form-item label="线条颜色">
        <el-color-picker v-model="form.grid.lineColor" />
      </el-form-item>
      <!--      <el-form-item label="显示镜面">-->
      <!--        <el-checkbox v-model="form.grid.mirror" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="镜面模糊值">-->
      <!--        <el-slider v-model="form.grid.blur" show-input class="form-slider clean-border" />-->
      <!--      </el-form-item>-->
      <!-- 环境设置 -->
      <!--      <el-form-item label="环境" class="right-menu-title" />-->
      <!--      <el-form-item label="环境类型">-->
      <!--        <el-select v-model="form.environment.type" placeholder="请选择">-->
      <!--          <el-option label="默认" value="default" />-->
      <!--          <el-option label="自定义" value="custom" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="天空盒地址">-->
      <!--        <el-input v-model="form.environment.skyboxUrl" placeholder="请输入天空盒地址" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="天空盒水平角度">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.skyboxHorizontalAngle"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="环境贴图地址">-->
      <!--        <el-input v-model="form.environment.environmentMapUrl" placeholder="请输入环境贴图地址" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="环境亮度">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.brightness"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="环境水平角度">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.horizontalAngle"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="时间">-->
      <!--        &lt;!&ndash;        <el-time-picker&ndash;&gt;-->
      <!--        &lt;!&ndash;          v-model="form.environment.time"&ndash;&gt;-->
      <!--        &lt;!&ndash;          placeholder="请选择时间"&ndash;&gt;-->
      <!--        &lt;!&ndash;          value-format="HH:mm:ss"&ndash;&gt;-->
      <!--        &lt;!&ndash;          format="HH:mm:ss"&ndash;&gt;-->
      <!--        &lt;!&ndash;        />&ndash;&gt;-->
      <!--        <input-->
      <!--          id="timePicker"-->
      <!--          type="time"-->
      <!--          v-model="form.environment.time"-->
      <!--          @change="handleTimeChange"-->
      <!--        />-->
      <!--        &lt;!&ndash; 显示选中的时间 &ndash;&gt;-->
      <!--        <div v-if="selectedTime">-->
      <!--          <h3>已选时间:</h3>-->
      <!--          <p>{{ selectedTime }}</p>-->
      <!--        </div>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="开启太阳光">-->
      <!--        <el-checkbox v-model="form.environment.sunlightEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="阳光最大亮度">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.sunlightBrightness"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="阳光水平角度">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.sunlightHorizontalAngle"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="显示阴影">-->
      <!--        <el-checkbox v-model="form.environment.shadowsEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="阴影质量">-->
      <!--        <el-select v-model="form.environment.shadowQuality" placeholder="请选择">-->
      <!--          <el-option label="低" value="low" />-->
      <!--          <el-option label="中" value="medium" />-->
      <!--          <el-option label="高" value="high" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="阴影偏差">-->
      <!--        <el-slider-->
      <!--          v-model="form.environment.shadowBias"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!-- 相机设置 -->
      <el-form-item label="相机" class="right-menu-title" />
      <el-form-item label="类型">
        <el-select v-model="form.camera.type" placeholder="请选择">
          <el-option label="旋转相机" value="orbit" />
          <el-option label="第一人称相机" value="first-person" />
        </el-select>
      </el-form-item>
      <el-form-item label="运行时禁用">
        <el-checkbox v-model="form.camera.disabledDuringRuntime" />
      </el-form-item>
      <el-form-item label="相机视场角">
        <el-input-number v-model="form.camera.fieldOfView" controls-position="right" />
      </el-form-item>
      <el-form-item label="中心-X">
        <el-input-number v-model="form.camera.centerX" controls-position="right" />
      </el-form-item>
      <el-form-item label="中心-Y">
        <el-input-number v-model="form.camera.centerY" controls-position="right" />
      </el-form-item>
      <el-form-item label="中心-Z">
        <el-input-number v-model="form.camera.centerZ" controls-position="right" />
      </el-form-item>
      <!--      <el-form-item label="半径">-->
      <!--        <el-input-number v-model="form.camera.radius" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="最小半径">-->
      <!--        <el-input-number v-model="form.camera.minRadius" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="最大半径">-->
      <!--        <el-input-number v-model="form.camera.maxRadius" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="水平角度">-->
      <!--        <el-slider-->
      <!--          v-model="form.camera.horizontalAngle"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="垂直角度">-->
      <!--        <el-slider-->
      <!--          v-model="form.camera.verticalAngle"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="最小垂直角度">-->
      <!--        <el-input-number v-model="form.camera.minVerticalAngle" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="最大垂直角度">-->
      <!--        <el-input-number v-model="form.camera.maxVerticalAngle" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      &lt;!&ndash; 特效设置 &ndash;&gt;-->
      <!--      <el-form-item label="特效" class="right-menu-title" />-->
      <!--      <el-form-item label="雾效果启用">-->
      <!--        <el-checkbox v-model="form.effects.fogEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="雾颜色">-->
      <!--        <el-color-picker v-model="form.effects.fogColor" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="雾起始距离">-->
      <!--        <el-input-number v-model="form.effects.fogStartDistance" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="雾结束距离">-->
      <!--        <el-input-number v-model="form.effects.fogEndDistance" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="粒子系统启用">-->
      <!--        <el-checkbox v-model="form.effects.particleSystemEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="粒子数量">-->
      <!--        <el-input-number v-model="form.effects.particleCount" controls-position="right" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="粒子速度">-->
      <!--        <el-slider-->
      <!--          v-model="form.effects.particleSpeed"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="粒子颜色">-->
      <!--        <el-color-picker v-model="form.effects.particleColor" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="光晕效果启用">-->
      <!--        <el-checkbox v-model="form.effects.glowEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="光晕强度">-->
      <!--        <el-slider-->
      <!--          v-model="form.effects.glowIntensity"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="光晕颜色">-->
      <!--        <el-color-picker v-model="form.effects.glowColor" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="反射效果启用">-->
      <!--        <el-checkbox v-model="form.effects.reflectionEnabled" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="反射强度">-->
      <!--        <el-slider-->
      <!--          v-model="form.effects.reflectionIntensity"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="反射模糊度">-->
      <!--        <el-slider-->
      <!--          v-model="form.effects.reflectionBlur"-->
      <!--          show-input-->
      <!--          class="form-slider clean-border"-->
      <!--        />-->
      <!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<style scoped>
  .settings-panel {
    background-color: #1e2430;
    color: #c9cbd5;
    overflow: auto;
    font-size: 0.8vw;
  }

  :deep(.el-form-item) {
    margin-left: 0.8vw;
  }

  .el-form-item >>> .el-form-item__label {
    justify-content: flex-start;
    color: #c9cbd5;
  }

  .el-form-item >>> input {
    color: #c9cbd5 !important;
  }

  .right-menu-title :deep(.el-form-item__label) {
    font-size: 1vw;
    font-weight: 550;
    --color: #fff;
  }
  /* 颜色 */
  :deep(.el-color-picker__trigger) {
    border: none;
    margin-left: 1vw;
  }
  /* 时间 */
  #timePicker {
    background: none;
  }
  .el-form-item :deep(.el-input-number) {
    margin-left: 0;
  }
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
  :deep(.el-input__wrapper) :hover {
    box-shadow: 0 0 0 1px white;
    border-radius: 2px;
  }
  :deep(.el-input__wrapper) :focus {
    box-shadow: 0 0 0 1px #4583ff;
    border-radius: 2px;
  }

  :deep(.el-input__wrapper .el-input__inner) {
    width: 10vw !important;
    height: 5vh !important;
    margin-left: -1vw;
    font-size: 0.8vw;
    text-align: left;
    padding-left: 1vw;
  }
  :deep(.el-input-number) {
    margin-left: 1vw;
  }
  /* 选择按钮 */
  :deep(.el-checkbox) {
    margin-left: 1vw;
  }
  /* 选择框 */
  :deep(.el-select__wrapper) {
    width: 10vw !important;
    box-shadow: none; /* 取消阴影 */
  }

  :deep(.el-checkbox__inner) {
    height: 1vh;
    left: 0.8vh;
  }

  :deep(.el-slider__button) {
    width: 1vw;
    height: 1vw;
  }
  :deep(.el-slider__runway) {
    margin-right: 1vw;
    margin-left: 1vw;
  }
  :deep(.el-input-number) {
    width: 10vw;
  }
  :deep(.el-input-number__increase) {
    display: none;
  }
  :deep(.el-input-number__decrease) {
    display: none;
  }
  /* 鼠标悬停时显示增加减少按钮 */
  .form-slider:hover :deep(.el-input-number__increase) {
    display: flex;
  }
  .form-slider:hover :deep(.el-input-number__decrease) {
    display: flex;
    margin-left: -1vw;
  }
  .form-slider :deep(.el-input) {
    margin-left: 0.6vw;
  }
  .form-slider :deep(.el-input-number__decrease) {
    border: none;
  }
  .form-slider :deep(.el-input-number__increase) {
    border: none;
  }
  /* 数字框 */
  .form-number :deep(.el-input-number__increase) {
    margin-right: 0.2vw;
    border: none;
  }
  .form-number :deep(.el-input-number__decrease) {
    margin-right: 0.2vw;
    border: none;
  }
  /* 清除边框样式 */
  .clean-border :deep(.el-input__wrapper) :hover {
    box-shadow: none;
  }
  .clean-border :deep(.el-input__wrapper) :focus {
    box-shadow: none;
  }
  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 0.3vw; /* 宽度 */
    background-color: rgb(123, 255, 0); /* 背景色 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #282c34; /* 轨道颜色 */
    border-radius: 0; /* 轨道圆角 */
  }

  /* 滚动条的滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #2926c3; /* 滑块颜色 */
    border-radius: 2px; /* 滑块圆角 */
    border: 0.8vw solid #535f79; /* 滑块边框 */
  }

  /* 滑块在悬停或者点击时的样式 */
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* 悬停时滑块颜色 */
  }
</style>
